<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>12306 首页</title>
    <link rel="stylesheet" href="framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="framework/reset.css">
    <link rel="stylesheet" href="styles/index.css">
</head>
<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <!-- 定位和天气部分 -->
            <div class="location-and-weather">
                <div class="location">昆明<i class="fa fa-angle-down"></i></div>
                <div class="weather">多云 20℃</div>
            </div>
            <!-- 搜索框部分 -->
            <div class="search">
                <div class="search-fixed-top">
                    <div class="search-box">
                        <i class="fa fa-search"></i><span>积分会员</span>
                    </div>
                </div>
            </div>
            <!-- 二维码和消息图标部分 -->
            <span class="icon-background">
                <i class="fa fa-qrcode"></i>
            </span>
            <span class="icon-background">
                <i class="fa fa-commenting-o"></i>
            </span>
        </header>

        <!-- 选择票种and查询车票部分 -->
        <div class="ticket">
            <div class="ticket-type">
                <div class="train-ticket">
                    <a href="">火车票</a>
                </div>
                <div class="plane-ticket">
                    <i class="fa fa-plane"></i>
                    <a href="plane-ticket.html">飞机票</a>
                </div>
                <div class="bus-ticket">
                    <i class="fa fa-bus"></i>
                    <a href="bus-ticket.html">汽车票</a>
                </div>
            </div>
            <div class="train-ticket-info">
                <div class="place">
                    <p>天河机场</p>
                    <img class="train-icon" src="images/train.png" alt="火车logo">
                    <p>孝感东</p>
                </div>
                <div class="date">
                    <p class="month-day">7月8日</p>
                    <p class="week-day">周一</p>
                </div>
                <div class="button-ticket-query">
                    <button>查询车票</button>
                </div>
                <div class="ticket-query-history">
                    <p class="history-1">天河机场--孝感东</p>
                    <p class="history-2">昆明--武汉</p>
                    <p class="delete-history">清除历史</p>
                </div>
            </div>
        </div>

        <!-- 功能盒子部分 -->
        <ul class="function-box">
            <li>
                <img src="images/车站大屏.jpg" alt="车站大屏">
                <p>车站大屏</p>
            </li>
            <li>
                <img src="images/计次·定期票.jpg" alt="计次·定期票">
                <p>计次·定期票</p>
            </li>
            <li>
                <img src="images/铁路e卡通.jpg" alt="铁路e卡通">
                <p>铁路e卡通</p>
            </li>
            <li>
                <img src="images/时刻表.jpg" alt="时刻表">
                <p>时刻表</p>
            </li>
            <li>
                <img src="images/温馨服务.jpg" alt="温馨服务">
                <p>温馨服务</p>
            </li>
            <li>
                <img src="images/空铁联运.jpg" alt="空铁联运">
                <p>空铁联运</p>
            </li>
            <li>
                <img src="images/敬老版.jpg" alt="敬老版">
                <p>敬老版</p>
            </li>
            <li>
                <img src="images/酒店住宿.jpg" alt="酒店住宿">
                <p>酒店住宿</p>
            </li>
            <li>
                <img src="images/约车.jpg" alt="约车">
                <p>约车</p>
            </li>
            <li>
                <img src="images/门票·旅游.jpg" alt="门票·旅游">
                <p>门票·旅游</p>
            </li>
            <li>
                <img src="images/餐饮·特产.jpg" alt="餐饮·特产">
                <p>餐饮·特产</p>
            </li>
            <li>
                <img src="images/汽车票.jpg" alt="汽车票">
                <p>汽车票</p>
            </li>
            <li>
                <img src="images/铁路商城.jpg" alt="铁路商城">
                <p>铁路商城</p>
            </li>
            <li>
                <img src="images/中铁畅行卡.jpg" alt="中铁畅行卡">
                <p>中铁畅行卡</p>
            </li>
            <li>
                <img src="images/出行保险.jpg" alt="出行保险">
                <p>出行保险</p>
            </li>
        </ul>

        <!-- 热门咨讯部分 -->
        <div class="hot-news">
            <h3><p>热门</p>
                <p>资讯</p>
            </h3>
            <a href="">
                <div class="left"><p><strong>景区门票上线！</strong></p>
                    <p class="gray">高铁票、门票、酒店一站式搞定</p>
                </div>
                <div class="right"><i class="fa fa-angle-right"></i></div>
            </a>
        </div>

        <!-- 温馨服务部分 -->
        <div class="warm-service">
            <div class="left">
                <a href="">
                    <div class="left"><p><strong>温馨服务</strong></p>
                        <p class="gray">优质服务 品质出行</p>
                    </div>
                    <div class="right"><i class="fa fa-angle-right"></i></div>
                </a>
                <ul class="service-type">
                    <li>
                        <img src="images/遗失物品查找.jpg" alt="遗失物品查找">
                        <div class="text">
                            <p><strong>遗失物品查找</strong></p>
                            <p>在线登记遗失物品</p>
                        </div>
                    </li>
                    <li>
                        <img src="images/重点旅客预约.jpg" alt="重点旅客预约">
                        <div class="text">
                            <p><strong>重点旅客预约</strong></p>
                            <p>提前预约便捷出行</p>
                        </div>
                    </li>
                    <li>
                        <img src="images/临时身份证明.jpg" alt="临时身份证明">
                        <div class="text">
                            <p><strong>临时身份证明</strong></p>
                            <p>电子乘车身份证明</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="right">
                <a href="">
                    <img src="images/服务-铁路一卡通.jpg" alt="铁路一卡通服务">
                </a>
            </div>
        </div>

        <!-- 铁路商城部分 -->
        <div class="railroad-mall">
            <div class="top">
                <p class="title"><strong>铁路商城</strong></p>
                <a href="">更多<i class="fa fa-angle-right"></i></a>
            </div>
                <ul class="product">
                    <li>
                        <img src="images/product1.png" alt="掼蛋潮牌礼盒">
                        <p>掼蛋潮牌礼盒</p>
                    </li>
                    <li>
                        <img src="images/product2.png" alt="便捷式开瓶器">
                        <p>便捷式开瓶器</p>
                    </li>
                </ul>
        </div>

        <!-- 底部菜单部分 -->
        <ul class="footer">
            <li class="index" onclick="location.href='index.html'">
                <i class="fa fa-train"></i>
                <p>首页</p>
            </li>
            <li onclick="location.href='travel-service.html'">
                <i class="fa fa-suitcase"></i>
                <p>出行服务</p>
            </li>
            <li onclick="location.href='order.html'">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li onclick="location.href='member.html'">
                <i class="fa fa-diamond"></i>
                <p>铁路会员</p>
            </li>
            <li>
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>
    </div>
</body>
</html>